<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.search" placeholder="鉴赏ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getUser">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <template>
      <el-table :data="users" highlight-current-row v-loading="loading" style="text-align: center;">
        <el-table-column header-align="center" prop="id" label="鉴赏ID"  width="120">
        </el-table-column>
        <el-table-column header-align="center" prop="username" label="送鉴用户">
        </el-table-column>
        <el-table-column header-align="center" prop="name" label="品类" width="300" >
        </el-table-column>
        <el-table-column header-align="center" prop="realName" label="鉴定专家" width="200" >
        </el-table-column>
        <el-table-column header-align="center" prop="createTime" label="发布时间" width="200" >
        </el-table-column>
        <el-table-column header-align="center" label="操作" width="450">
        <template scope="scope">
          <el-button size="small" @click="lookInfo(scope.$index, scope.row)">查看详情</el-button>
          <el-button size="small" @click="replaceReply(scope.$index, scope.row)">代回复</el-button>
          <el-button size="small" @click="againAllot(scope.$index, scope.row)">重新分配</el-button>
          <el-button size="small" @click="abrogateAppreciate(scope.$index, scope.row)">取消鉴赏</el-button>
           <el-button v-if='!scope.row.actType' @click='setFreebtn(scope.$index, scope.row)' size="small">设为免费</el-button>
          <el-button type="warning" v-if='scope.row.actType' size="small">已免费</el-button>
        </template>
      </el-table-column>
      </el-table>
    </template>
      <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
      </el-pagination>
      <div class="all">总计<span class="total">{{total}}</span>条记录</div>
    </el-col>
    <!-- 代回复 -->
    <el-dialog
  title="代回复"
  :visible.sync="centerDialogVisible"
  width="30%"
   :before-close="handleClose">
  <el-input
  type="textarea"
  :rows="12"
  placeholder="请输入内容"
  resize="none"
  v-model="textarea">
</el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="abandonReply">取 消</el-button>
    <el-button type="primary" @click="affirmReply">确 定</el-button>
  </span>
</el-dialog>

<!-- 重新分配 -->
<el-dialog
  title="重新分配"
  :visible.sync="dialogVisible"
  :before-close="againClose">
  <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.id" placeholder="用户名或手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="againGetExpert">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  <el-table :row-class-name = "tableRowClassName"  :data="expertList" highlight-current-row v-loading="loading" @row-click='select' style="margin-top:20px;width: 1000px;text-align: center;">
      <el-table-column header-align="center"   prop="id" label="专家ID"  width="120">
        </el-table-column>
        <el-table-column  header-align="center" prop="username" label="专家名称" >
        </el-table-column>
        <el-table-column  header-align="center" prop="realName" label="专家真实姓名" width="200" >
        </el-table-column>
        <el-table-column  header-align="center" prop="name" label="鉴赏类别" width="250">
        </el-table-column>
        <el-table-column  header-align="center" prop="phone" label="专家手机号" width="200" >
        </el-table-column>
      </el-table>
  <span slot="footer" class="dialog-footer">
    <el-button @click="abolishAllot">取 消</el-button>
    <el-button type="primary" @click="sureAllot">确 定</el-button>
  </span>
   <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="8" :total="againTotal" style="float:right;">
      </el-pagination>
      <div class="all">总计<span class="total">{{againTotal}}</span>条记录</div>
    </el-col>
</el-dialog>

<!-- 设置免费弹窗 -->
<el-dialog
  title="设置免费提示"
  :visible.sync="setfree"
  width="30%"
  center>
  <span>是否确认将此条鉴赏设置为免费</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="setfree = false">取 消</el-button>
    <el-button type="primary" @click="setFree">确 定</el-button>
  </span>
</el-dialog>
  </section>
</template>
<script>
  import util from '../../common/js/util'
  import { sendData,cutString,sendDataPost } from "../../api/api";
  export default {
    data() {
      return {
        filters: {
          search: '',
          id:""
        },
        loading: false,
        users: [
        ],
        total: 0,
        page: 1,
        centerDialogVisible: false,
        dialogVisible:false,
        textarea:"",
        appraisalID:"",
        againTotal:0,
        againPage:1,
        expertId:"",
        expertList:[],
        setfree:false,
        taskId:""
      }
    },
    methods: {
      //获取所有用户未完成鉴赏列表
      getUser: function () {
        let para = this.filters.search;
         if (para!==""&&isNaN(para)) {
             this.$message({
              message: "请输入正确的鉴赏ID",
              type: "error"
            });
          return
          }
        let page=JSON.parse(this.page);
        let params=sendData({url: "appraisal/list",msg: {search:para,pgNo:page,num:20,order:2,status: 0}})
        this.loading = true;
        this.$http.get(params.baseURL,{params:params.params}).then(res=>{
          var res=cutString(res.bodyText)
          this.total=res.msg.total
          this.users = res.msg.taskStatusRsps
          res.msg.taskStatusRsps.map(function(v,i){
            v.createTime=v.createTime.slice(0,19)
          })
          this.loading = false;
          console.log(res)
        })
      },
      // 分页请求
      handleCurrentChange(val) {
        console.log(val)
        this.page = val;
        this.getUser();
      },
      //查看详情界面
      lookInfo: function (index, row) {
       // this.$router.push({  
       //      path: '/appreciateDetails',   
       //      name: '鉴赏详情',  
       //      params: {   
       //          id: row.id, 
       //          category:row.name,
       //          expert:row.realName  
       //      }   
       //  })
        window.open("./static/preview/appreciateDetails.html?id="+row.id+'&category='+row.name+"&expert="+row.realName)
      },
      // 代回复弹窗获取鉴赏ID
      replaceReply(index,row){
        this.centerDialogVisible=true
        this.appraisalID=row.id
      },
     //代回复X关闭
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.textarea=""
            done();

          })
          .catch(_ => {});
      },
      // 取消代回复
      abandonReply(){
        this.centerDialogVisible= false,
        this.textarea=""
      },
      // 确认代回复
      affirmReply(){
        let params=sendData({url: "appraisal/replies",msg: {id:this.appraisalID,content:this.textarea}})
        this.$http.get(params.baseURL,{params:params.params}).then(res=>{
          var res=cutString(res.bodyText)
            // console.log(res)
             if (res.desc=="success!") {
              this.centerDialogVisible= false
              thid.getUser()
              this.$message({
              message: "代回复成功",
              type: "success"
            });
            }
          })
      },
      // 重新分配弹窗获取鉴赏ID
      againAllot(index,row){
        this.dialogVisible=true
        this.appraisalID=row.id
        this.againGetExpert()
      },
      // 请求重新分配专家
      againGetExpert(){
        let para = this.filters.id;
        let params=sendData({url: "export/find",msg: {search:para,pgNo:this.againPage,num:8}})
        this.$http.get(params.baseURL,{params:params.params}).then(res=>{
          var res=cutString(res.bodyText)
            console.log(res)
            this.againTotal=res.msg.length
            this.expertList=res.msg
        })
      },
     // 重新分配X关闭
      againClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.filters.id=""
            done();
          })
          .catch(_ => {});
        },

        // 重新分配选择专家获取专家ID
      select(row,event,column){
        this.expertId=row.id
        // 设置选中专家后，表格字体加不同颜色，以表示选中
        var getAllElement=document.querySelectorAll("."+column.id)
          getAllElement.forEach(function(v,i){
            var showID=v.parentNode.children[0].children[0].innerHTML
             getAllElement[i].parentNode.style.color=""
            if (showID==row.id) {
               console.log(showID)
            getAllElement[i].parentNode.style.color="red"
            }
          })
      },
       //改变当前点击的行的class，高亮当前行
        tableRowClassName: function(row, index){
          if(row.id == this.highlightId){
            return 'info-row';
          }
        },

      // 取消重新分配
      abolishAllot(){
        this.dialogVisible=false
        this.filters.id=""
      },
      // 确认重新分配
      sureAllot(){
         let params=sendData({url: "appraisal/deassign",msg: {id:this.appraisalID,expertId:this.expertId}})
        this.$http.get(params.baseURL,{params:params.params}).then(res=>{
          var res=cutString(res.bodyText)
          console.log(res)
            if (res.desc=="success!") {
              this.dialogVisible= false
              this.getUser()
              this.$message({
              message: "重新分配成功",
              type: "success"
            });
          }
        })
      },
      // 设置免费弹窗，并获取ID
      setFreebtn(index,row){
        this.setfree=true,
        this.taskId=row.id
        console.log(row.id)
      },
      // 设置免费
      setFree(){
        let params=sendDataPost({url: "appraisal/setActType",msg: {taskId:this.taskId,actType:"20180313"}})
        let data=JSON.stringify(params.params)
        this.$http.post(params.baseURL,data).then(res=>{
          this.setfree=false
          this.getUser()
        })
      },
      // 取消鉴赏
      abrogateAppreciate(index,row){
        this.$message({
            message: "sorry,此功能暂不开发",
            type: "success"
            });
      }
  },

   watch:{
       'filters.search':function(){
        if (this.filters.search=='') {
          this.getUser();
        }
      },
      'filters.id':function(){
        if (this.filters.id=='') {
          this.againGetExpert();
        }
      }
       },
    mounted() {
      this.getUser();
    }
  };

</script>

<style scoped>
.all{
  font-size: 16px;
  line-height: 32px;
  color: #666
}
.total{
    padding:0 5px;
    color: #52BAE9;
  }
.el-table__body tr.current-row>td {
  color: rgb(255,0,0)!important;
}
.info-row{
  background: red;
}
</style>